<template>
  <el-drawer :append-to-body="true" :before-close="saveApprover"
             :wrapper-closable="false"
             :visible.sync="approverDrawerCopy" class="set_promoter"
             direction="rtl" size="550px" title="审批人设置"
  >
    <div class="demo-drawer__content">
      <div class="drawer_content">
        <div class="approver_content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基础设置" name="base">
              <div class="medium-font-size text-primary-color mb10">
                审批人设置
              </div>
              <el-radio-group v-model="approverConfig.settype" style="display: block">
                <el-radio :label="1">
                  指定审批
                </el-radio>
                <el-radio :label="2">
                  部门主管
                </el-radio>
                <el-radio :label="3">
                  发起人本人
                </el-radio>
                <el-radio :label="4">
                  问卷内成员字段
                </el-radio>
              </el-radio-group>
              <div v-if="approverConfig.settype===1">
                <div>
                  <el-button icon="el-icon-plus" style="display: block" @click="addApprover">
                    添加/修改成员
                  </el-button>
                  <p class="selected_list">
                    <span v-for="(item,index) in approverConfig.nodeUserList" :key="index">
                      {{ item.nickName }}
                      <i class="el-icon-close" @click="func.removeEle(approverConfig.nodeUserList,item)" />
                    </span>
                    <a v-if="approverConfig.nodeUserList&&approverConfig.nodeUserList.length!=0"
                       @click="approverConfig.nodeUserList=[]"
                    >清除</a>
                  </p>
                </div>
                <div>
                  <el-button icon="el-icon-plus" style="display: block" @click="addRoleApprover">
                    添加/修改角色
                  </el-button>
                  <p class="selected_list">
                    <span v-for="(item,index) in approverConfig.nodeRoleList" :key="index">
                      {{ item.roleName }}
                      <i class="el-icon-close" @click="func.removeEle(approverConfig.nodeRoleList,item)" />
                    </span>
                    <a v-if="approverConfig.nodeRoleList&&approverConfig.nodeRoleList.length!=0"
                       @click="approverConfig.nodeRoleList=[]"
                    >清除</a>
                  </p>
                </div>
                <div>
                  <el-button icon="el-icon-plus" style="display: block" @click="addPostApprover">
                    添加/修改岗位
                  </el-button>
                  <p class="selected_list">
                    <span v-for="(item,index) in approverConfig.nodePostList" :key="index">
                      {{ item.postName }}
                      <i class="el-icon-close" @click="func.removeEle(approverConfig.nodePostList,item)" />
                    </span>
                    <a v-if="approverConfig.nodePostList&&approverConfig.nodePostList.length!=0"
                       @click="approverConfig.nodePostList=[]"
                    >清除</a>
                  </p>
                </div>
                <!--              </div>-->
              </div>
              <div v-if="approverConfig.settype===2">
                <span>发起人的：</span>
                <el-select v-model="approverConfig.approveDirectorLevel"
                           placeholder="请选择"
                           @change="(val)=>{this.$forceUpdate()}"
                >
                  <el-option label="第1级主管" value="1" />
                  <el-option label="第2级主管" value="2" />
                  <el-option label="第3级主管" value="3" />
                  <el-option label="第4级主管" value="4" />
                  <el-option label="第5级主管" value="5" />
                  <el-option label="第6级主管" value="6" />
                </el-select>
              </div>
              <div v-if="approverConfig.settype===3" class="text-secondary-color">
                * 发起人本人将作为审批人
              </div>
              <div v-if="approverConfig.settype===4" class="text-secondary-color">
                <div class="base-font-size text-primary-color mb10">
                  选择问卷成员字段：
                  <el-select v-model="approverConfig.formUserFields" placeholder="请选择字段"
                             @change="(val)=>{this.$forceUpdate()}"
                  >
                    <el-option
                      v-for="item in getUserFieldList()"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </div>
              <div v-if="approverConfig.settype!==3">
                <div class="text-primary-color medium-font-size mb20">
                  多人审批方式
                </div>
                <el-radio-group v-model="approverConfig.multipleApprovalType" @change="(val)=>{this.$forceUpdate()}">
                  <el-radio label="1" style="display: block">
                    会签（需所有人审批通过）
                  </el-radio>
                  <el-radio label="2" style="display: block">
                    或签（一名审批人同意即可）
                  </el-radio>
                </el-radio-group>
              </div>
            </el-tab-pane>
            <el-tab-pane label="问卷权限" name="field">
              <el-table
                :data="approverConfig.formProperties"
                style="width: 100%"
              >
                <el-table-column
                  label="字段名"
                  prop="name"
                />
                <el-table-column
                  label="操作"
                  prop="id"
                >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row['readable']">
                      可见
                    </el-checkbox>
                    <el-checkbox v-model="scope.row['writeable']">
                      可编辑
                    </el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="任务事件" name="event">
              <el-alert
                title="POST推送目标接口所有的问卷填写内容，请求参数携带在RequestBody"
                :closable="false"
                type="warning"
              />
              <el-form label-position="top" label-width="80px" :model="approverConfig.taskEvents">
                <el-form-item label="自定义同意事件">
                  <el-switch
                    v-model="approverConfig.taskEvents.agree"
                  />
                </el-form-item>
                <el-form-item v-if="approverConfig.taskEvents.agree" label="同意请求路径">
                  <span slot="label">
                    同意请求路径
                    <el-tooltip content="如https://api.tduckcloud.com/notify等格式" placement="top">
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </span>
                  <el-input v-model="approverConfig.taskEvents.agreeNotifyUrl" placeholder="请输入标准的http请求地址">
                    <template slot="prepend">
                      POST
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="自定义拒绝事件">
                  <el-switch
                    v-model="approverConfig.taskEvents.reject"
                  />
                </el-form-item>
                <el-form-item v-if="approverConfig.taskEvents.reject" label="拒绝请求路径">
                  <span slot="label">
                    拒绝请求路径
                    <el-tooltip content="如https://api.tduckcloud.com/notify等格式" placement="top">
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </span>
                  <el-input v-model="approverConfig.taskEvents.rejectNotifyUrl" placeholder="请输入标准的http请求地址">
                    <template slot="prepend">
                      POST
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="demo-drawer__footer clear">
          <el-button type="primary" @click="saveApprover">
            确 定
          </el-button>
          <el-button @click="closeDrawer">
            取 消
          </el-button>
        </div>
        <employees-dialog
          :data.sync="checkedList"
          :visible.sync="approverVisible"
          @change="sureApprover"
        />
        <role-dialog
          :data.sync="checkedRoleList"
          :visible.sync="approverRoleVisible"
          @change="sureRoleApprover"
        />
        <post-dialog
          :data.sync="checkedPostList"
          :visible.sync="approverPostVisible"
          @change="surePostApprover"
        />
      </div>
    </div>
  </el-drawer>
</template>
<script>
import _ from 'lodash'
import employeesDialog from '../dialog/employeesDialog.vue'
import roleDialog from '../dialog/roleDialog.vue'
import postDialog from '../dialog/postDialog.vue'
import func from "../preload"
import {listProjectItemRequest} from "@/api/project/form"

export default {
  components: {employeesDialog, roleDialog, postDialog},
  props: ['formKey'],
  data() {
    return {
      activeName: 'base',
      func: func,
      formProperties: [],
      // 审核配置字段
      approverConfig: {
        settype: 1,
        // 多人审批方式 会签（需所有人审批通过） 或签（一名审批人同意即可）
        multipleApprovalType: 2,
        nodeUserList: [],
        nodeRoleList: [],
        nodePostList: [],
        taskEvents: {
          agree: false,
          agreeNotifyUrl: '',
          reject: false,
          rejectNotifyUrl: ''
        },
        // 主管审核等级
        approveDirectorLevel: null,
        formUserFields: null
      },
      approverVisible: false,
      approverRoleVisible: false,
      approverPostVisible: false,
      checkedRoleList: [],
      checkedPostList: [],
      checkedList: []
    }
  },
  computed: {
    approverDrawerCopy() {
      return this.$store.state.workflow.approverDrawer
    },
    approverConfig1() {
      return this.$store.state.workflow.approverConfig.value
    }
  },
  watch: {
    approverConfig1(val) {
      if (!this.approverConfig.formProperties) {
        this.approverConfig.formProperties = this.formProperties
      } else {
        // 处理 设计流程后新加字段 不显示问题
        this.formProperties.forEach((prop) => {
          // 不存在就加入
          let index = this.approverConfig.formProperties.findIndex((item) => item.id == prop.id)
          if (index < 0) {
            this.approverConfig.formProperties.push(prop)
          }
        })
      }
      this.approverConfig = Object.assign(JSON.parse(JSON.stringify(this.approverConfig)), JSON.parse(JSON.stringify(val)))
      // Object.assign(this.approverConfig, JSON.parse(JSON.stringify(val)))
      // Object.assign(this.approverConfig, val ? JSON.parse(JSON.stringify(val)) : {})
    }
  },
  created() {
    listProjectItemRequest({key: this.formKey, displayType: false}).then((res) => {
      if (res.data) {
        this.formProperties = res.data.map((item) => {
          return {
            id: item.formItemId,
            name: item.textLabel,
            readable: true,
            writeable: false
          }
        })
      }
    })
  },
  methods: {
    addApprover() {
      this.approverVisible = true
      this.checkedList = this.approverConfig.nodeUserList
    },
    addRoleApprover() {
      this.approverRoleVisible = true
      this.checkedRoleList = this.approverConfig.nodeRoleList
    },
    addPostApprover() {
      this.approverPostVisible = true
      this.checkedPostList = this.approverConfig.nodePostList
    },
    sureApprover(data) {
      this.approverConfig.nodeUserList = data
      this.approverVisible = false
    },
    sureRoleApprover(data) {
      this.approverConfig.nodeRoleList = data
      this.approverRoleVisible = false
    },
    surePostApprover(data) {
      this.approverConfig.nodePostList = data
      this.approverPostVisible = false
    },
    saveApprover() {
      this.$store.commit('updateApproverConfig', {
        value: this.approverConfig,
        flag: true,
        id: this.$store.state.workflow.approverConfig.id
      })
      this.$emit("update:processNode", this.approverConfig)
      this.closeDrawer()
    },
    closeDrawer() {
      this.$store.commit('updateApprover', false)
    },
    // 获取成员字段
    getUserFieldList() {
      return this.formProperties.filter((item) => item.id.indexOf("user_select") > -1)
    }
  }
}
</script>
<style lang="scss">
@import "../dialog/dialog.css";

.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
    height: 90%;
  }

  .approver_self_select .el-button,
  .approver_content .el-button {
    margin-bottom: 20px;
  }

  .approver_content .el-radio,
  .approver_some .el-radio,
  .approver_self_select .el-radio {
    width: 27%;
    margin-bottom: 20px;
  }

  .approver_manager p {
    line-height: 32px;
  }

  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }

  .approver_self {
    padding: 28px 20px;
  }

  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 0;
  }

  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
}
</style>
